import { useState, useEffect } from "react";
import { useLocation } from "umi";
import { Form, Button } from "antd";
import LoginPage from "../login";
import RegisterPage from "../register";
import styles from "./index.less";

const Auth = () => {
  const [mode, setMode] = useState<"login" | "register">("login");
  const [form] = Form.useForm();
  const location = useLocation();

  // 清除表单状态
  useEffect(() => {
    form.resetFields();
  }, [mode]);

  // 跳转来源记录
  const from = location.state?.from || "/dashboard";

  const toggleMode = () => {
    setMode((prev) => (prev === "login" ? "register" : "login"));
  };

  return (
    <div className={styles["auth-container"]}>
      <div className={styles["auth-tabs"]}>
        <Button
          type={mode === "login" ? "primary" : "default"}
          onClick={toggleMode}
          style={{ marginRight: 8 }}
        >
          登录
        </Button>
        <Button
          type={mode === "register" ? "primary" : "default"}
          onClick={toggleMode}
        >
          注册
        </Button>
      </div>

      {mode === "login" ? (
        <LoginPage form={form} from={from} toggleMode={toggleMode} />
      ) : (
        <RegisterPage form={form} from={from} toggleMode={toggleMode} />
      )}
    </div>
  );
};

export default Auth;
